import { Component } from '@angular/core';

import { LoggerService, ComponentBase } from '../share';

@Component({
    moduleId: module.id,
    selector: 'spy-parent',
    templateUrl: './onInit.component.html',
    styles: [
        '.parent {background: khaki;}',
        '.heroes {background: LightYellow; padding: 0 8px}'
    ],
    providers: [LoggerService]
})
export class SpyParentComponent extends ComponentBase {
    newName = 'Herbie';
    heroes: string[] = ['Windstorm', 'Magneta'];
    spyLog: string[];

    constructor(private logger: LoggerService) {
        super();
        this.spyLog = logger.logs;
    }

    addHero() {
        if (this.newName.trim()) {
            this.heroes.push(this.newName.trim());
            this.newName = '';
            this.logger.tick();
        }
    }
    removeHero(hero: string) {
        this.heroes.splice(this.heroes.indexOf(hero), 1);
        this.logger.tick();
    }
    reset() {
        this.logger.log('-- reset --');
        this.heroes.length = 0;
        this.logger.tick();
    }
}


/*
   Remark:
     Directive构造函数的执行，是在Host元素后执行；
    1. 在构造函数之后马上执行复杂的初始化逻辑
    2. 在Angular设置完输入属性之后，对该组件进行准备。
*/
